웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹사이트의 소스 코드를 개발자 도구를 통해 확인하면 shadow root 하위로 작성된 코드 단위를 볼 수 있습니다. 아래와는 shadow root처럼 사용된 Shadow DOM에 대하여 알아보고자 합니다.
Shadow DOM은 웹 컴포넌트 기술 중 하나로, HTML 요소의 내부 구조를 캡슐화하여 외부와의 스타일 및 스크립트 충돌을 방지하는 기술입니다. 즉, 특정 요소의 "그림자 트리"를 생성하여 외부에서 접근할 수 없도록 만드는 것입니다. 즉 하나의 페이지에서 완전히 분리된 캡슐화가 필요한 경우에 사용하면 용이합니다. 특히 서드파티 라이브러리로 사용된 별도 기능의 HTML이 여기에 해당하죠. Discord Chatbot 역시 Shadow DOM을 사용하여 적용되어 있음을 확인할 수 있습니다.
그렇다면 Shadow Dom의 장점은 무엇일까요? 가장 큰 장점은 캡슐화, 재사용성, 유지보수 용이성을 예로들 수 있습니다.
Shadow DOM을 사용하면 특정 요소의 스타일과 스크립트를 캡슐화하여 외부 영향으로부터 보호할 수 있습니다. 이를 통해 개발자는 다른 요소들과의 충돌을 걱정하지 않고 독립적인 컴포넌트를 만들 수 있습니다. 이런 이유로 외부 라이브러리를 가져와 DOM을 구성할 때 자주 사용됩니다. 캡슐화를 통해 완전히 분리되어 동작할 수 있게되죠.
Shadow DOM은 재사용 가능한 컴포넌트를 만드는 데 유용합니다. 캡슐화 되어있어 동일한 소스의 컴포넌트를 다양한 곳에서 동일한 형태로 사용할 수 있습니다.
다음으로 유지보스의 용이성입니다. 캡슐화된 구조 덕분에 유지보수가 용이합니다. 특정 컴포넌트의 변경 사항이 다른 부분에 영향을 미치지 않으므로, 코드의 가독성과 유지보수성이 크게 향상됩니다.
이런 큰 장점을 가진 Shadow DOM은 어떻게 사용할 수 있는지 간략한 예제코드와 함께 알아보겠습니다. 제일 먼저 Shadow Root를 생성해야 합니다.
Shadow DOM을 사용하려면 먼저 shadow root를 생성해야 합니다. 이를 위해 attachShadow() 메서드를 사용합니다. 먼저 shadow root를 사용할 container를 아래와 같이 생성합니다.
이제 위의 container 내부에 Shadow DOM에 사용할 수 있는 자바스크립트 코드를 아래와 같이 적용하도록 합니다.
이제 Shadow DOM을 사용하여 shadowContent가 container 내부에 적용된 간략한 코드를 만들어보았습니다. 여기서 attachShadow() 메소드는 아래와 같이 두 가지 모드가 사용 가능하죠.
Shadow DOM에는 두 가지 모드가 있으며 open과 closed를 사용할 수 있죠. 먼저 open 모드는 JavaScript를 통해 shadow root에 접근할 수 있지만, closed 모드는 접근할 수 없는 것이 차이점입니다.
여기까지 Shadow DOM에 대하여 간략히알아보았습니다. 이와 같이 구현 가능한 다른 방법들은 무엇이 있을까요?
캡슐화처럼 스타일을 구분되어 적용하기 위해서 어떤 방법이 사용 가능할까요? 일반적으로 CSS modules, Scoped CSS와 같은 방법이 사용되며 특정 요소에만 적용될 수 있도록 클래스나 고유 어트리뷰트를 사용하는 방법이 가능합니다. 다만 이 방법들은 캡슐화를 통한 완벽하게 분리되는 것이 아니므로 Shadow DOM을 사용하는 방법이 가장 확실하겠습니다.
여기까지 Shadow DOM에 대하여 간략하게 알아보았는데요... Shadow DOM은 웹 컴포넌트 개발 시 매우 유용한 기술로 캡슐화와 재사용성, 유지보수 용이성을 통해 효율적인 개발을 도와줍니다.
Shadow DOM이란?
Shadow DOM은 웹 컴포넌트 기술 중 하나로, HTML 요소의 내부 구조를 캡슐화하여 외부와의 스타일 및 스크립트 충돌을 방지하는 기술입니다. 즉, 특정 요소의 "그림자 트리"를 생성하여 외부에서 접근할 수 없도록 만드는 것입니다. 즉 하나의 페이지에서 완전히 분리된 캡슐화가 필요한 경우에 사용하면 용이합니다. 특히 서드파티 라이브러리로 사용된 별도 기능의 HTML이 여기에 해당하죠. Discord Chatbot 역시 Shadow DOM을 사용하여 적용되어 있음을 확인할 수 있습니다.
Shadow DOM의 장점
그렇다면 Shadow Dom의 장점은 무엇일까요? 가장 큰 장점은 캡슐화, 재사용성, 유지보수 용이성을 예로들 수 있습니다.
1. 캡슐화
Shadow DOM을 사용하면 특정 요소의 스타일과 스크립트를 캡슐화하여 외부 영향으로부터 보호할 수 있습니다. 이를 통해 개발자는 다른 요소들과의 충돌을 걱정하지 않고 독립적인 컴포넌트를 만들 수 있습니다. 이런 이유로 외부 라이브러리를 가져와 DOM을 구성할 때 자주 사용됩니다. 캡슐화를 통해 완전히 분리되어 동작할 수 있게되죠.
2. 재사용성
Shadow DOM은 재사용 가능한 컴포넌트를 만드는 데 유용합니다. 캡슐화 되어있어 동일한 소스의 컴포넌트를 다양한 곳에서 동일한 형태로 사용할 수 있습니다.
3. 유지보수 용이성
다음으로 유지보스의 용이성입니다. 캡슐화된 구조 덕분에 유지보수가 용이합니다. 특정 컴포넌트의 변경 사항이 다른 부분에 영향을 미치지 않으므로, 코드의 가독성과 유지보수성이 크게 향상됩니다.
Shadow DOM 사용법
이런 큰 장점을 가진 Shadow DOM은 어떻게 사용할 수 있는지 간략한 예제코드와 함께 알아보겠습니다. 제일 먼저 Shadow Root를 생성해야 합니다.
1. Shadow Root 생성하기
Shadow DOM을 사용하려면 먼저 shadow root를 생성해야 합니다. 이를 위해 attachShadow() 메서드를 사용합니다. 먼저 shadow root를 사용할 container를 아래와 같이 생성합니다.
<div id="container"></div>
이제 위의 container 내부에 Shadow DOM에 사용할 수 있는 자바스크립트 코드를 아래와 같이 적용하도록 합니다.
// container 요소 가져오기
const container = document.getElementById('container');
// shadow root 생성하기
const shadowRoot = container.attachShadow({ mode: 'open' });
// shadow root에 shadow content 추가하기
const shadowContent = document.createElement('div');
shadowContent.innerHTML = `
<style>
.shadow-box {
padding: 20px;
background-color: lightgray;
border: 1px solid black;
}
</style>
<div class="shadow-box">shadow DOM으로 적용된 콘텐츠입니다.</div>
`;
shadowRoot.appendChild(shadowContent);
const container = document.getElementById('container');
// shadow root 생성하기
const shadowRoot = container.attachShadow({ mode: 'open' });
// shadow root에 shadow content 추가하기
const shadowContent = document.createElement('div');
shadowContent.innerHTML = `
<style>
.shadow-box {
padding: 20px;
background-color: lightgray;
border: 1px solid black;
}
</style>
<div class="shadow-box">shadow DOM으로 적용된 콘텐츠입니다.</div>
`;
shadowRoot.appendChild(shadowContent);
이제 Shadow DOM을 사용하여 shadowContent가 container 내부에 적용된 간략한 코드를 만들어보았습니다. 여기서 attachShadow() 메소드는 아래와 같이 두 가지 모드가 사용 가능하죠.
2. Shadow DOM 모드 사용하기
Shadow DOM에는 두 가지 모드가 있으며 open과 closed를 사용할 수 있죠. 먼저 open 모드는 JavaScript를 통해 shadow root에 접근할 수 있지만, closed 모드는 접근할 수 없는 것이 차이점입니다.
// open 모드
const openShadow = element.attachShadow({mode: 'open'});
// closed 모드
const closedShadow = element.attachShadow({mode: 'closed'});
const openShadow = element.attachShadow({mode: 'open'});
// closed 모드
const closedShadow = element.attachShadow({mode: 'closed'});
여기까지 Shadow DOM에 대하여 간략히알아보았습니다. 이와 같이 구현 가능한 다른 방법들은 무엇이 있을까요?
Shadow DOM 대신 사용하는 다른 방법
캡슐화처럼 스타일을 구분되어 적용하기 위해서 어떤 방법이 사용 가능할까요? 일반적으로 CSS modules, Scoped CSS와 같은 방법이 사용되며 특정 요소에만 적용될 수 있도록 클래스나 고유 어트리뷰트를 사용하는 방법이 가능합니다. 다만 이 방법들은 캡슐화를 통한 완벽하게 분리되는 것이 아니므로 Shadow DOM을 사용하는 방법이 가장 확실하겠습니다.
마치면서
여기까지 Shadow DOM에 대하여 간략하게 알아보았는데요... Shadow DOM은 웹 컴포넌트 개발 시 매우 유용한 기술로 캡슐화와 재사용성, 유지보수 용이성을 통해 효율적인 개발을 도와줍니다.
아래의 글도 찾고 계시지 않나요?